<template>
	<view class="pageBox">
		<view class="title">
			<view class="title_box">
				<view :class="index==navIndexOne?'item item_active':'item'" v-for="(item,index) in navOneList"
					:key="index" @click="navClickOne(item,index)">

					<view class="name">
						{{item.name}}
					</view>
					<view class="underline"></view>
				</view>
			</view>
		</view>

		<view class="con">
			<view class="item" v-for="(item,index) in orderList" :key="index">
				<view class="item_title">
					<view class="left">
						<image src="../../static/mine/img13.png" mode="aspectFill" class="img" v-if="item.orderTypeCode==3"></image>
						<image src="../../static/mine/img14.png" mode="aspectFill" class="img" v-if="item.orderTypeCode==4"></image>
						<image src="../../static/mine/img15.png" mode="aspectFill" class="img" v-if="item.orderTypeCode==1"></image>
						
						<!-- <view class="name" v-if="item.orderTypeCode==4">
							<view v-if="item.memberCardId==1">下楼休闲吧月卡会员</view>
							<view v-if="item.memberCardId==2">下楼休闲吧季卡会员</view>
							<view v-if="item.memberCardId==3">下楼休闲吧年卡会员</view>
						</view> -->
						<view class="name">
							{{item.productName}}
						</view>
						
					</view>

					<!--statusCode 待付款1 已关闭2 已付款3 已完成4  6待发货 7已发货-->
					<!--orderTypeCode 积分权益1 积分电商2 团购订单3 会员订单4-->
					<view class="right" v-if="item.statusCode==1">
						待付款，剩余 <uni-countdown :show-day="false" :second="item.timeEnd/1000" @timeup="timeOut(item,index)" color="#F55726" splitorColor="#F55726"/>
					</view>
					<view class="right" v-if="item.statusCode==3">
						待使用
					</view>
					<view class="right" v-if="item.statusCode==4">
						已结束
					</view>
					<view class="right" v-if="item.statusCode==2">
						已过期
					</view>
					<view class="right" v-if="item.statusCode==5">
						已退款
					</view>
					
					<view class="right" v-if="item.statusCode==6">
						待发货
					</view>
					<view class="right" v-if="item.statusCode==7">
						已发货
					</view>
					
				</view>
				<view class="item_cen">
					
					
					<!-- <image src="https://imgs.ynz666.com/2025/02/19/M2QzYmQyYjIwNTRjNDA3NDI3ZGU1ZDJlMzg5ZWY0YTk=.png" mode="aspectFill"
						class="img" v-if="item.orderTypeCode==4&&item.memberCardId==1"></image>
					<image src="https://imgs.ynz666.com/2025/02/19/MjA1MWVjYTlkY2U1ZGQ2MGZlMzdlYTgxNDhiZjEzNjE=.png" mode="aspectFill"
						class="img" v-if="item.orderTypeCode==4&&item.memberCardId==2"></image>
					<image src="https://imgs.ynz666.com/2025/02/19/ZDNjZTVjZmFiNDNlZDQ3OWQwNThlZjUwODcwY2Q4YzI=.png" mode="aspectFill"
						class="img" v-if="item.orderTypeCode==4&&item.memberCardId==3"></image> -->
						
						
					<image :src="item.productMainImage[0]" mode="aspectFill"
						class="img"></image>
						
						
						
					<view class="right">
						<view class="right_view orderTime">
							下单时间：{{item.createdAt}}
						</view>
						
						
						<view class="right_view verificationTime" v-if="item.statusCode==7">
							快递单号：{{item.expressInfoExpressNumber}}
						</view>
						
						<view class="right_view verificationTime" v-if="item.statusCode==4&&item.orderTypeCode==4">
							<!-- 过期时间：{{item.expireTime}} -->
							过期时间：{{item.endTime}}
						</view>
						
						<view class="right_view verificationTime" v-if="item.orderTypeCode!=4&&statusCode==4">
							核销时间：{{item.endTime}}
						</view>
						
						<view class="right_view price" v-if="item.orderTypeCode!=1">
							总价：¥{{item.useAmount}}
						</view>
						<view class="right_view price" v-if="item.orderTypeCode==1">
							总价：¥{{item.useAmount}}/{{item.usePoints}}积分
						</view>
						
					</view>
				</view>
				<view class="item_foot">
					<!--statusCode 待付款1 已关闭2 已付款3 已完成4-->
					<!--orderTypeCode 积分权益1 积分电商2 团购订单3 会员订单4-->
					<!-- 取消订单 订单退款   立即付款 出示到店码-->
					
					<view class="btn btn1" v-if="(item.statusCode==1||item.statusCode==3)&&item.orderTypeCode==1" @click="modifyOrder(item,1,index)">
						取消订单
					</view>
					
					<!-- 团购取消订单 -->
					<view class="btn btn1" v-if="(item.statusCode==1||item.statusCode==3)&&item.orderTypeCode==3" @click="modifyOrder(item,1,index)">
						{{item.statusCode==1?'取消订单':'申请退款'}}
					</view>
					
					<!-- 团购已付款取消订单 -->
					<!-- <view class="btn btn1" v-if="item.statusCode==3&&item.orderTypeCode==3" @click="modifyOrder(item,1,index)">
						申请退款
					</view> -->
					
					<view class="btn btn1" v-if="item.statusCode==4&&orderTypeCode==4" @click="WeixinServer()">
						订单退款
					</view>
					
					<view class="btn btn1" v-if="(item.statusCode==4||item.statusCode==2||item.statusCode==5)&&item.orderTypeCode!=4" @click="modifyOrder(item,2,index)">
						删除
					</view>
					
					<view class="btn btn2" v-if="item.statusCode==1" @click="payment(item,index)">
						立即付款
					</view>
					
					<view class="btn btn2" v-if="item.statusCode==3&&item.orderTypeCode!=4" @click="orderMed(item)">
						出示到店码
					</view>
				</view>
			</view>
			<view class="item_kong" v-if="isLastPage">
				没有更多了
			</view>
		</view>
		
		<!-- 标准版确认取消弹框 -->
		<view class="mask_Verify" v-if="modalVerify">
			<view class="maskFour_box">
				<view class="bj_box">
					<!-- <image
						src=""
						mode="scaleToFill" class="free_img"></image> -->
						<view class="box">
						  <view class="box_title">
						  	确认{{typeIndex==1?'取消':'删除'}}
						  </view>
							
							<view class="box_con" v-if="orderTypeCode==1">
							  {{typeIndex==1?'取消订单不会返回积分，':''}}
								确认{{typeIndex==1?'取消订单吗？':'删除此信息记录吗'}}
							</view>
							
							<view class="box_con" v-if="orderTypeCode==3">
								<text v-if="statusCode==1||statusCode==2">{{typeIndex==1?'取消订单，':''}}确认{{typeIndex==1?'取消订单吗？':'删除此信息记录吗'}}</text>
								<text v-if="statusCode==3">{{typeIndex==1?'申请退款，退款会退回，':''}}确认{{typeIndex==1?'申请退款吗？':'删除此信息记录吗'}}</text>
								
							</view>
							
							<view class="box_font">
								<view class="btn btn1" @click="cancelDelete()">
									关闭弹框
								</view>
								<view class="btn btn2" @click="verifyDelete()">
									确认{{typeIndex==1?'':'删除'}}
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		apiProductInfo,
		apiOrderQuery,
		apiOrdeRunpayRepay,
		apiOrderStatus,
		apiOrderDetail
	} from '../../apis/my.js';
	import gongType from '@/utils/debounce.js'
	import { getTimertype, getTimestamp } from '@/utils/request/ActivityTime.js';
	import {subscribeMessage,CANCEL_AN_ORDER_ID,MEMBER_CONSUMPTION_ID} from '@/utils/subMessage.js'
	export default {
		data() {
			return {
				navOneList: [{
						name: '全部',
						id: 0
					},
					{
						name: '待付款',
						id: 1
					},
					{
						name: '待使用',
						id: 11
					},
					{
						name: '已结束',
						id: 4
					}
				],
				navIndexOne: 0,


				currentPage: 1,
				isLastPage: false,
				status:'',
				orderList:[],
				
				modalVerify:false,
				typeIndex:1,//当前是取消 还是 删除
				currentIndex:0,//当前index值
				currentId:'',//当前执行id
				orderTypeCode:0,//当前执行
				statusCode:0,//当前执行
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			cancelDelete(){
				this.modalVerify=false
			},
			// 确定执行弹框
			verifyDelete(){
				let that = this;
				let data={
					id:that.currentId,
					status:that.typeIndex
				}
				apiOrderStatus(data).then(res=>{
					
					if(that.typeIndex==1){
						// 需要判断舒服已经付款
						if(that.statusCode==1){
							that.orderList[that.currentIndex].statusCode=2
							uni.showToast({
								title:'取消成功',
								icon:'none'
							})
						}else{
							
							if(that.orderList[that.currentIndex].orderTypeCode==1){
								that.orderList[that.currentIndex].statusCode=2
							}else{
								that.orderList[that.currentIndex].statusCode=5
							}
							uni.showToast({
								title:that.orderList[that.currentIndex].orderTypeCode==1?'取消成功':'申请退款成功',
								icon:'none'
							})
						}
						
					}else{
						that.orderList.splice(that.currentIndex,1)
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
					}
					that.modalVerify=false
					
					console.log(that.orderList,"that.orderList")
				})
				
			},
			navClickOne(item, index) {
				this.navIndexOne = index
				this.status=item.id
				
				this.orderList = [];
				this.currentPage=1;
				this.isLastPage = false;
				this.getList();
			},
			// 出示核销码
			orderMed(item){
				console.log(item,"item")
				if(item.orderTypeCode==1){
					subscribeMessage([CANCEL_AN_ORDER_ID,MEMBER_CONSUMPTION_ID]).then(()=>{
						uni.navigateTo({
							url:`/pageB/voucherCode/voucherCode?orderId=${item.uid}`
						})
					})
				}else{
					uni.navigateTo({
						url:`/pageB/voucherCode/voucherCode?orderId=${item.uid}`
					})
				}
				
			},
			// 修改订单状态 1取消订单 2删除订单
			modifyOrder(item,type,index){
				let that = this;
				// if(type==1){
				// 	let data={
				// 		id:item.id,
				// 		status:type
				// 	}
				// 	apiOrderStatus(data).then(res=>{
						
				// 		if(type==1){
				// 			that.orderList[index].statusCode=2
				// 		}else{
				// 			that.orderList.splice(index,1)
				// 		}
						
				// 		console.log(that.orderList,"that.orderList")
				// 	})
				// }else{
					console.log(item,"itemitemitem")
					that.typeIndex=type
					that.currentIndex=index
					that.currentId=item.id
					that.modalVerify=true
					
					// <!--orderTypeCode 积分权益1 积分电商2 团购订单3 会员订单4-->
					// <!--statusCode 待付款1 已关闭2 已付款3 已完成4-->
					that.orderTypeCode=item.orderTypeCode
					that.statusCode=item.statusCode
				// }
				
				
				
				
			},
			// 倒计时时间到
			timeOut(item,index){
				this.orderList[index].statusCode=2
			},
			// 接入微信客服
			WeixinServer() {
				console.log("打开客服")
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},
			//立即付款
			payment:gongType.debounce(function (item,index){
				console.log(item,index,"item,index")
				let that = this;
				let data={
					orderUID:item.uid
				}
				apiOrdeRunpayRepay(data).then(payment=>{
					switch(payment.code){
						case 0:
							app.WxPayMent(payment.data).then( res => {
								// statusCode 待付款1 已关闭2 已付款3 已完成4
								// orderTypeCode 积分权益1 积分电商2 团购订单3 会员订单4
								if(item.orderTypeCode==4){
									that.orderList[index].statusCode=4
								}else{
									that.orderList[index].statusCode=3
								}
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
			},1000),
			getList() {
				let that = this;
				let data = {
					page: that.currentPage,
					pageSize: 10,
					statusNum: that.status,
				}
				console.log(data,"data")
				apiOrderQuery(data).then(res => {
					
					
					// that.orderList = that.currentPage == 1 ? res.data.list.map((item) => {
					// 		return Object.assign({}, item, {
					// 			 statusCode:that.transformCode(1,item.status),
					// 			 orderTypeCode:that.transformCode(2,item.orderType)
					// 		});
					// 	}) : that.orderList.concat(
					// res.data.list.map((item) => {
					// 		return Object.assign({}, item, {
					// 			 statusCode:that.transformCode(1,item.status),
					// 			 orderTypeCode:that.transformCode(2,item.orderType)
					// 		});
					// 	})
					// );
					
					that.orderList.push(
						...res.data.list.map((item) => {
							return Object.assign({}, item, {
								 statusCode:that.transformCode(1,item.status),
								 orderTypeCode:that.transformCode(2,item.orderType),
								 timeEnd:item.payTime ?
								   getTimestamp(
								     item.payTime.replace(
								       new RegExp("-", "gm"),
								       "/"
								     )
								   ) - res.timestamp*1000:'',
								 productName:item.productName.length>10?item.productName.slice(0,10)+'...':item.productName
								   
							});
						})
					)
					
					// console.log(new Date().getTime(),"----",res.timestamp)

					console.log('订单列表', that.orderList)
					that.isLastPage = res.data.lastPage;
				})
				
			},
			add(m){
			      return m<10?'0'+m:m 
			},
			format(shijianchuo){
			    var time = new Date(shijianchuo);
			    var y = time.getFullYear();
			    var m = time.getMonth()+1;
			    var d = time.getDate();
			
			    var h = time.getHours();
			    var mm = time.getMinutes();
			    var s = time.getSeconds();
			    return y+'-'+m+'-'+d+'-'+this.add(h)+':'+this.add(mm)+':'+this.add(s);
			},
			transformCode(index,status){
				if(index==1){
					switch(status){
						case '待付款':
						return 1;
						break;
						case '已关闭':
						return 2;
						break;
						case '待核销':
						return 3;
						break;
						case '已完成':
						return 4;
						break;
						case '已退款':
						return 5;
						break;
						case '待发货':
						return 6;
						break;
						case '已发货':
						return 7;
						break;
						default:
						break;
					}
				}else{
					switch(status){
						case '积分权益':
						return 1;
						break;
						case '积分电商':
						return 2;
						break;
						case '团购订单':
						return 3;
						break;
						case '会员订单':
						return 4;
						break;
						default:
						break;
					}
				}
			}
		},
		onReachBottom() {

			if (!this.isLastPage) {
				this.currentPage++;
				this.getList();

			} else {
				return
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}

	.pageBox {
		width: 100%;
		padding-bottom: 200rpx;

		.title {
			width: 100%;
			height: 100rpx;
			background: #fff;
			box-shadow: 0rpx 1rpx 0rpx 0rpx #F2F0F0;
			position: fixed;
			top: 0;
			z-index: 10;

			.title_box {
				display: flex;
				align-items: center;
				height: 100%;
				margin: 0 10rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 34rpx;

					.name {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						padding-bottom: 8rpx;
					}

					.underline {
						width: 30rpx;
						height: 6rpx;
						background: #fff;
						border-radius: 3rpx;
					}
				}

				.item_active {
					.name {
						font-weight: bold;
						font-size: 30rpx;
						color: #333333;
						padding-bottom: 8rpx;
					}

					.underline {
						width: 30rpx;
						height: 6rpx;
						background: #FE4926;
						border-radius: 3rpx;
					}
				}
			}
		}

		.con {
			padding-top: 130rpx;
			margin: 0 30rpx;

			.item {
				width: 100%;
				// height: 356rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 28rpx;
				padding-bottom: 30rpx;

				.item_title {
					margin: 0 26rpx;
					padding: 30rpx 0 14rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #ECECEC;

					.left {
						display: flex;
						align-items: center;

						.img {
							width: 65rpx;
							height: 36rpx;
						}

						.name {
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
						}
					}

					.right {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						display: flex;
						align-items: center;
					}
				}

				.item_cen {
					display: flex;
					align-items: center;
					margin: 0 30rpx;
					padding: 22rpx 0;

					.img {
						width: 130rpx;
						height: 130rpx;
						border-radius: 12rpx;
					}

					.right {
						padding-left: 30rpx;

						.right_view {
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							padding-bottom: 10rpx;
						}
					}
				}

				.item_foot {
					margin: 0 14rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.btn {
						width: 140rpx;
						height: 58rpx;
						border-radius: 28rpx;

						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 18rpx;
					}

					.btn1 {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						border: 1rpx solid #999999;
					}

					.btn2 {
						border-radius: 26rpx;
						border: 1rpx solid #FB8E2D;
						background: linear-gradient(143deg, #FB8E2D 0%, #FC5A28 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx #FFD7D7;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}

			.item_kong {
				width: 100%;
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	.mask_Verify{
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
			background-color: rgba(0, 0, 0, 0.65);
				
			.maskFour_box {
				width: 604rpx;
				overflow: hidden;
				position: absolute;
				top: 50%;
				transform: translateY(-60%);
				left: 50%;
				margin-left: -302rpx;
				border-radius: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.bj_box{
					background: #fff;
					width: 604rpx;
					height: 358rpx;
					position: relative;
					.free_img {
						width: 604rpx;
						height: 358rpx;
					}
					.box{
						width: 604rpx;
						height: 358rpx;
						position: absolute;
						top: 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						.box_title{
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #181818;
							padding-top: 40rpx;
						}
						.box_con{
							font-weight: 400;
							font-size: 28rpx;
							color: #232323;
							line-height: 40rpx;
							margin: 20rpx 76rpx 0;
						}
						.box_font{
							margin: 44rpx 0 0;
							width: 540rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.btn{
								width: 252rpx;
								height: 82rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.btn1{
								background: #FFFFFF;
								border-radius: 42rpx;
								border: 2rpx solid #DEDEDE;
								font-weight: bold;
								font-size: 30rpx;
								color: #181818;
							}
							.btn2{
								background: linear-gradient( 225deg, #FE4602 0%, #FF8414 100%);
								border-radius: 42rpx;
								border: 2rpx solid #FF8414;
								font-weight: bold;
								font-size: 30rpx;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}
</style>
